<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：8、事件处理器  事件修饰符</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>	
	<!-- 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
		尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 

		为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

		js event(事件对象)详解： http://www.cnblogs.com/chaoyuehedy/p/5692899.html
	-->
	<div id="app">
		<!-- 阻止单击事件冒泡 -->
		<a v-on:click.stop="doThis">a</a>
		<!-- 提交事件不再重载页面 -->
		<form v-on:submit.prevent="onSubmit">b</form>
		<!-- 修饰符可以串联  -->
		<a v-on:click.stop.prevent="doThat">c</a>
		<!-- 只有修饰符 -->
		<form v-on:submit.prevent>d</form>
		<!-- 添加事件侦听器时使用事件捕获模式 -->
		<div v-on:click.capture="doThis">...</div>
		<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
		<div v-on:click.self="doThat">...</div>	

		<a v-on:click.once="doThis"></a>
	</div>
	
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			methods: {
				doThis: function(){
					alert('doThis')
				}
			}
		})
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->